<template>
  <div style="background-color: #F5F7F9;height: 100vh;overflow: auto">
    <Header @tabIndexChange=""></Header>
    <div class="container flex-column">
      <div class="flex-start-center normal-text" style="width: 100% ;padding: 20px 0">
        <span>当前位置：</span>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">{{data.breadcrumbLabelList[0]}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/course/center',query: {id:data.articleInfo.courseTypeId} }">{{data.breadcrumbLabelList[1]}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{data.breadcrumbLabelList[2]}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <Detail :articleInfo="data.articleInfo" />

    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {ArrowRight} from '@element-plus/icons-vue'
import {getArticleInfo} from '../../api/home.js'
import Detail from './component/detail.vue'
import Header from "../component/header.vue";

const router = useRouter();
const route = useRoute();

const data = reactive({
  breadcrumbLabelList: [],
  courseName: '',
  articleInfo: {
    id: '',
    title: '',
    catalogName: '',
    courseTypeId: '',
    courseTypeName: '',
    publishTime: '',
    originSource: '',
    readAmount: '',
    digest: '',
    content: ''
  },
});
const initData = () => {
  let articleId = route.query.id
  getArticleInfo(articleId, (res) => {
    data.articleInfo = res.data
    Object.keys(data.articleInfo).forEach((key) => {
      data.articleInfo[`${key}`] = res.data[`${key}`]
    })
    initBreadcrumb()
  })
}
const initBreadcrumb = () => {
  data.breadcrumbLabelList = ['首页']
  data.breadcrumbLabelList.push(data.articleInfo.courseTypeName)
  data.breadcrumbLabelList.push(data.articleInfo.title)
}
onMounted(() => {
  initData()
})

</script>

<style scoped>
.normal-text {
  font-size: 12px;
  color: #7C7B7B;
  font-weight: 400;
}
.el-breadcrumb {
  font-size: 12px;
  color: #7C7B7B;
  font-weight: 400;
}
</style>
